<template>
  <div id="Content-page" :class="{ 'no-scroll': isMobile && drawer }">
    <Paging :pagData="[{ name: '游记管理', router: '/travel-manag' }]" />
    <!-- 旅游主题横幅 -->
    <div class="page-hero">
      <div class="hero-content">
        <h1>游记管理</h1>
        <p>发现风景 · 记录足迹 · 分享旅途中的美好瞬间</p>
      </div>
      <div class="hero-decor" aria-hidden="true"></div>
    </div>
    <div class="content-main">
      <el-table class="travel-table" :data="tableData" style="width: 100%">
        <el-table-column prop="author_data[0].nickname" label="作者" width="180" />
        <el-table-column prop="time" label="发布时间" />
        <el-table-column prop="address" label="位置" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="title" label="操作" width="180">
          <template #default="scope">
            <el-button
              class="reset-primary-btn"
              size="small"
              type="primary"
              @click="drawerView(scope.row._id, scope.$index)"
              >查看详情</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 移动端卡片列表 -->
      <div class="travel-card-list">
        <div class="travel-card" v-for="(item, index) in tableData" :key="item._id">
          <div class="card-cover">
            <el-image
              class="cover-media"
              v-if="item.fileType === 'image' && item.image && item.image.length"
              :src="item.image[0]"
              fit="cover"
              :lazy="true"
            />
            <video
              v-else
              class="cover-media"
              :src="item.videoUrl?.url"
              preload="metadata"
              muted
              playsinline
            ></video>
          </div>
          <div class="card-section author">
            <img class="avatar" :src="item.author_data[0].avatarUrl" alt="" />
            <div class="author-meta">
              <p class="nickname">{{ item.author_data[0].nickname }}</p>
              <p class="time">{{ item.time }}</p>
            </div>
          </div>
          <div class="card-section title">{{ item.title }}</div>
          <div class="card-section location">
            <span v-if="item.province">{{ item.province }}</span>
            <span v-if="item.city">{{ item.city }}</span>
            <span v-if="item.address">{{ item.address }}</span>
          </div>
          <div class="card-actions">
            <el-button
              class="reset-primary-btn"
              size="small"
              type="primary"
              @click="drawerView(item._id, index)"
              >查看详情</el-button
            >
            <el-button size="small" type="danger" @click="handleDelete(item._id)">删除</el-button>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pager-next">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="count"
          @current-change="currentChange"
        />
      </div>
    </div>
    <el-drawer
      v-model="drawer"
      :with-header="false"
      :size="drawerSize"
      :lock-scroll="true"
      append-to-body
    >
      <!-- 图文 -->
      <el-carousel
        height="300px"
        :autoplay="false"
        v-if="tableData[travelIndex].fileType == 'image'"
      >
        <el-carousel-item v-for="(item, index) in tableData[travelIndex].image" :key="index">
          <el-image
            style="width: 100%; height: 300px"
            :src="item"
            :zoom-rate="1.2"
            :preview-src-list="tableData[travelIndex].image"
            :initial-index="index"
            preview-teleported
            fit="cover"
          />
        </el-carousel-item>
      </el-carousel>
      <!-- 视频 -->
      <div class="travel-video" v-else>
        <video width="100%" height="300" loop controls v-if="drawer">
          <source :src="tableData[travelIndex].videoUrl?.url" type="video/mp4" />
        </video>
      </div>
      <!-- 作者 -->
      <div class="author-view drawer-view">
        <div class="author-left">
          <img :src="tableData[travelIndex].author_data[0].avatarUrl" alt="" />
          <div class="author-name">
            <p>{{ tableData[travelIndex].author_data[0].nickname }}</p>
            <p>{{ tableData[travelIndex].time }}</p>
          </div>
        </div>
        <div class="author-right mobile-only">
          <el-button class="reset-primary-btn" type="primary" size="small" @click="drawer = false"
            >返回</el-button
          >
        </div>
      </div>
      <!-- 地址 -->
      <div class="drawer-view article-city global-display global-f-wrap">
        <p>{{ tableData[travelIndex].province }}</p>
        <p>{{ tableData[travelIndex].city }}</p>
        <p>{{ tableData[travelIndex].address }}</p>
      </div>
      <!-- 标题，内容 -->
      <div class="drawer-view author-essay">
        <p>{{ tableData[travelIndex].title }}</p>
        <p>{{ tableData[travelIndex].content }}</p>
      </div>
      <!-- 评论器 -->
      <div class="drawer-view Comment-message" v-if="userMessageData.length > 0">
        <div
          class="Comment-users global-display"
          v-for="(item, index) in userMessageData"
          :key="index"
        >
          <img :src="item.comment_user[0].avatarUrl" alt="" />
          <div>
            <p>{{ item.comment_user[0].nickname }}</p>
            <p>{{ item.content }}</p>
          </div>
        </div>
        <span class="loadMore" v-if="userMessageData.length >= 5" @click="moreMessage">{{
          moreTitle
        }}</span>
      </div>
      <div style="height: 300px"></div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
// 顶部导航组件
import Paging from '@/page/components/Paging-component.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { getTravelManagAPI, getTravelCommentAPI, deleteTravelManagAPI } from '@/api/travel-manag'
import type { GetTravelManagItem, GetTravelManagCommentItem } from '@/type/travel-mange'

onMounted(async () => {
  await getTravelManagData()
})
// 用户的游记
const tableData = ref<GetTravelManagItem[]>([])
const count = ref(1)
const currentPage = ref(1)
async function getTravelManagData(page = 1) {
  currentPage.value = page
  const res = await getTravelManagAPI(page)
  console.log(res)
  count.value = res.data.count
  tableData.value = res.data.data
}
// 分页
async function currentChange(event: number) {
  await getTravelManagData(event)
}
// 弹窗展示
const drawer = ref(false)
const travelId = ref('')
const travelIndex = ref(0)
// 小屏抽屉占满宽度
const drawerSize = ref('30%')
const isMobile = ref(window.innerWidth < 768)
function updateDrawerSize() {
  const mobile = window.innerWidth < 768
  isMobile.value = mobile
  drawerSize.value = mobile ? '100%' : '30%'
}
updateDrawerSize()
window.addEventListener('resize', updateDrawerSize)
onUnmounted(() => {
  window.removeEventListener('resize', updateDrawerSize)
})
async function drawerView(_id: string, index: number) {
  travelId.value = _id
  travelIndex.value = index
  newPage.value = 1
  moreTitle.value = '查看更多'
  messAge(_id)
  drawer.value = true
}
// 删除游记
async function handleDelete(_id: string) {
  try {
    await ElMessageBox.confirm('确认删除该游记吗？', '提示', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消',
    })
    await deleteTravelManagAPI(_id)
    ElMessage.success('删除成功')
    drawer.value = false
    await getTravelManagData(currentPage.value)
  } catch (err) {
    // 用户取消或关闭无需提示
    if (err && typeof err === 'object') return
  }
}
// 用户评论数据
const userMessageData = ref<GetTravelManagCommentItem[]>([])
// 获取评论数据
async function messAge(article_id: string, page = 1) {
  const res = await getTravelCommentAPI(article_id, page)
  userMessageData.value = res.data
}
// 更多评论
const newPage = ref(1)
const moreTitle = ref('查看更多')
async function moreMessage() {
  newPage.value++
  const res = await getTravelCommentAPI(travelId.value, newPage.value)
  userMessageData.value = [...userMessageData.value, ...res.data]
  moreTitle.value = res.data.length > 0 ? '查看更多' : '没有更多了'
}
</script>

<style scoped>
:root {
  --travel-primary: #2bb6d7; /* 海天蓝 */
  --travel-accent: #ff8a47; /* 暖阳橙 */
  --travel-leaf: #2ecf91; /* 森林绿 */
  --text-title: #0f172a;
  --text-secondary: #475569;
  --card-bg: #ffffff;
}

#Content-page {
  background: linear-gradient(180deg, #eaf8ff 0%, #ffffff 40%);
  min-height: 100%;
}

.page-hero {
  position: relative;
  margin: 12px 0 24px;
  border-radius: 16px;
  padding: 28px 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(43, 182, 215, 0.12), rgba(46, 207, 145, 0.12)),
    radial-gradient(1000px 200px at 10% -20%, rgba(43, 182, 215, 0.22), transparent 60%),
    radial-gradient(800px 160px at 90% -30%, rgba(255, 138, 71, 0.22), transparent 60%), #f9fbff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  margin: 0 0 6px;
  font-size: 24px;
  color: var(--text-title);
  letter-spacing: 0.5px;
}

.hero-content p {
  margin: 0;
  color: var(--text-secondary);
}

.hero-decor::before,
.hero-decor::after {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 280px;
  height: 140px;
  background: radial-gradient(closest-side, rgba(43, 182, 215, 0.35), transparent 70%);
  filter: blur(6px);
  transform: translate(10%, -10%) rotate(-6deg);
}

.hero-decor::after {
  inset: auto auto -25% -10%;
  background: radial-gradient(closest-side, rgba(255, 138, 71, 0.35), transparent 70%);
  transform: translate(-5%, 10%) rotate(8deg);
}

.content-main {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 18px 16px 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

/* 表格主题化 */
:deep(.travel-table) {
  --el-table-border-color: rgba(15, 23, 42, 0.06);
  --el-table-row-hover-bg-color: rgba(43, 182, 215, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

:deep(.travel-table .el-table__header-wrapper th) {
  background: linear-gradient(180deg, rgba(43, 182, 215, 0.08), rgba(46, 207, 145, 0.08));
  color: #0f172a;
  font-weight: 700;
}

:deep(.travel-table .el-table__row) {
  transition: background-color 0.2s ease;
}

:deep(.travel-table .cell) {
  white-space: nowrap;
}

/* 主题按钮 */
:deep(.el-button--primary) {
  background: linear-gradient(135deg, var(--travel-primary), var(--travel-leaf));
  border: none;
  box-shadow: 0 6px 16px rgba(43, 182, 215, 0.3);
}

:deep(.el-button--primary:hover) {
  filter: brightness(1.02);
}

/* 详情按钮：确保强对比与可见度 */
.detail-btn {
  /* 渐变背景作为兜底 */
  background: linear-gradient(135deg, var(--travel-primary), var(--travel-accent));
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 16px rgba(43, 182, 215, 0.35);
  min-width: 84px;
  /* 覆盖 Element Plus 按钮变量，防止被默认背景置白 */
  --el-button-bg-color: var(--travel-primary) !important;
  --el-button-hover-bg-color: var(--travel-accent) !important;
  --el-button-active-bg-color: var(--travel-accent) !important;
  --el-button-text-color: #ffffff !important;
  --el-button-hover-text-color: #ffffff !important;
  --el-button-active-text-color: #ffffff !important;
  --el-button-border-color: transparent !important;
  --el-button-hover-border-color: transparent !important;
  --el-button-active-border-color: transparent !important;
}

.detail-btn:hover {
  filter: brightness(1.05);
}

.detail-btn:focus-visible {
  outline: 2px solid var(--travel-accent);
  outline-offset: 2px;
}

/* 深度覆盖：确保在表格/各种状态下颜色可见 */
:deep(.el-button.detail-btn),
:deep(.el-button.detail-btn.is-plain),
:deep(.travel-table .el-button.detail-btn) {
  background: linear-gradient(135deg, var(--travel-primary), var(--travel-accent)) !important;
  background-color: var(--travel-primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

:deep(.el-button.detail-btn .el-button__text) {
  color: #ffffff !important;
}

/* 分页 */
.pager-next {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

:deep(.el-pagination.is-background .el-pager li) {
  border-radius: 8px;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #fff;
}

/* 抽屉主体与媒体 */
:deep(.el-drawer__body) {
  padding: 0 !important;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 60%);
}

:deep(.el-carousel),
.travel-video video {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.travel-video video {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.drawer-view {
  margin: 12px 12px 0;
}

/* 作者卡片 */
.author-view {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.author-view img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.author-left {
  display: flex;
  align-items: center;
}
.author-left .author-name {
  padding-left: 12px;
}

.author-view p:nth-child(1) {
  font-weight: 800;
  color: var(--text-title);
}

.author-right {
  margin-left: 12px;
}
.mobile-only {
  display: none;
}

/* 地址徽章 */
.article-city p {
  position: relative;
  background: linear-gradient(135deg, rgba(43, 182, 215, 0.18), rgba(46, 207, 145, 0.18));
  color: #0f172a;
  margin: 0 10px 10px 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px 6px 26px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.article-city p::before {
  content: '📍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 标题与内容 */
.author-essay p:nth-child(1) {
  font-weight: 900;
  font-size: 18px;
  padding: 10px 0 6px;
  color: var(--text-title);
}

.author-essay p:nth-child(2) {
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 评论区 */
.Comment-message {
  background-color: #f6f7f9;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.Comment-users {
  padding: 14px 12px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
}

.Comment-users:last-child {
  border-bottom: none;
}

.Comment-users div {
  padding-left: 12px;
}

.Comment-users img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.Comment-users p:nth-child(1) {
  color: #64748b;
  padding-bottom: 2px;
  font-weight: 700;
}

.loadMore {
  text-align: center;
  display: block;
  padding: 10px 0 12px;
  color: var(--travel-primary);
  cursor: pointer;
}

/* 细节微动效 */
:deep(.el-table__row:hover) {
  transform: translateZ(0);
}

/* 指定该按钮回退为 Element Plus 默认主按钮配色（避开全局渐变） */
.reset-primary-btn {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-outline-color: var(--el-color-primary-light-5);
  box-shadow: none;
}

:deep(.reset-primary-btn.el-button--primary) {
  background: var(--el-button-bg-color) !important;
  border-color: var(--el-button-border-color) !important;
  color: var(--el-button-text-color) !important;
}

:deep(.reset-primary-btn.el-button--primary:hover) {
  background: var(--el-button-hover-bg-color) !important;
  border-color: var(--el-button-hover-border-color) !important;
  color: var(--el-button-hover-text-color) !important;
}

:deep(.reset-primary-btn.el-button--primary:active) {
  background: var(--el-button-active-bg-color) !important;
  border-color: var(--el-button-active-border-color) !important;
  color: var(--el-button-active-text-color) !important;
}

/* ===== 移动端卡片样式 ===== */
.travel-card-list {
  display: none;
}

@media (max-width: 767px) {
  :deep(.travel-table) {
    display: none !important;
  }

  .travel-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
  }

  .mobile-only {
    display: block;
  }

  /* 抽屉开启时，禁止页面层滚动，抽屉内部独立滚动 */
  #Content-page.no-scroll {
    height: 100vh;
    overflow: hidden;
  }
  :deep(body.el-popup-parent--hidden) {
    overflow: hidden !important;
    touch-action: none;
  }
  :deep(.el-drawer),
  :deep(.el-drawer__container) {
    height: 100vh;
  }
  :deep(.el-drawer__container) {
    overflow: hidden;
  }
  :deep(.el-drawer__body) {
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .travel-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .card-cover {
    position: relative;
    width: 100%;
    padding-top: 56%; /* 16:9 */
    background: #f3f4f6;
  }

  :deep(.el-image.cover-media) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  :deep(.el-image.cover-media .el-image__inner) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cover-media.video,
  .card-cover > video.cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }

  .card-section {
    padding: 12px 12px 0;
  }

  .card-section.author {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .card-section.author .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .author-meta .nickname {
    margin: 0;
    font-weight: 700;
    color: var(--text-title);
  }

  .author-meta .time {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .card-section.title {
    font-weight: 800;
    color: var(--text-title);
    padding-top: 10px;
  }

  .card-section.location {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
  }

  .card-section.location span {
    background: linear-gradient(135deg, rgba(43, 182, 215, 0.14), rgba(46, 207, 145, 0.14));
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
  }

  .card-actions {
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}
</style>
